import Panel from "./../../elements/Panel";
import Header from "./../../components/Header";
import {connect} from "react-redux";
import Label from "./../../components/FormLabel";
import FormGroup from "./../../components/FormGroup";
import FormItem from "./../../components/FormItem";
import FormItemType from "./../../components/FormItemType";
import InputGroup from "./../../components/InputGroup";
import {fetch, fetchUser} from "../../actions";
import {md5Url, URL} from "../../libs/Url";
import {Fetch} from "../../libs/";
import {SUBJECT, PAGE_SUBJECT} from "./../../actions/subject";


const Duty = React.createClass({
    getInitialState(){

        const self = this;
        return {
            open: false,
            selected: '',
            form: [
                {
                    name: 'name',
                    label: '班级名称',
                    placeholder: '',
                    value: '六年级一班',
                    tips: '',
                    type: FormItemType.TEXT_SHOW,

                },
                // {
                //     name: 'comment',
                //     label: '值日表',
                //     value: '',
                //     required: true,
                //     placeholder: '',
                //     tips: '',
                //     type: FormItemType.TEXT_AREA,
                //     onchange: function (index, content) {
                //         self.setState({
                //             form: [
                //                 ...self.state.form.slice(0, index),
                //                 Object.assign({}, self.state.form[index], {
                //                     value: content,
                //                     tips: content.length ? '' : '该项必填',
                //                 }),
                //                 ...self.state.form.slice(index + 1),
                //             ]
                //         });
                //     }
                // },
                {
                    name: 'fileid',
                    label: '图片',
                    value: '',
                    required: true,
                    placeholder: '',
                    tips: '',
                    type: FormItemType.UPLOAD,
                    onchange: function (index, content) {
                        self.setState({
                            form: [
                                ...self.state.form.slice(0, index),
                                Object.assign({}, self.state.form[index], {
                                    value: content,
                                    tips: content.length ? '' : '该项必填',
                                }),
                                ...self.state.form.slice(index + 1),
                            ]
                        });
                    }
                },


            ],
            tips: {}
        }
    },
    setchange(index, content){
        const self = this;
        self.setState({

            form: [
                ...self.state.form.slice(0, index),
                Object.assign({}, self.state.form[index], {
                    value: content,
                    tips: content.length ? '' : '该项必填',
                }),
                ...self.state.form.slice(index + 1),
            ]
        })
    },

    componentDidMount() {
        const {dispatch, user} = this.props;
        // dispatch(fetchUser()); //获取登录用户信息
        // dispatch(fetch({url: URL.DUTY_ADD}));
        console.log(user.dutyClass);
        if (user.dutyClass && user.dutyClass.classid) {
            Fetch(URL.DUTY_GET, {
                body: {classid: user.dutyClass.classid}
            })
                .then(res=> {
                    console.log(res)
                })
                .catch(e=> {
                    console.log(e)
                })
        }

    },
    onsubmit(){
        const {dispatch} = this.props;
        const self = this;
        var form = {};
        self.state.form.forEach((item, index)=> {
            if (item.required && item.value.length == 0) {
                self.setState({
                    form: [
                        ...self.state.form.slice(0, index),
                        Object.assign({}, self.state.form[index], {
                            tips: '该项必填',
                        }),
                        ...self.state.form.slice(index + 1),
                    ]
                })
            } else {
                form[item.name] = item.value
            }
        });
        if (Object.keys(form).length == self.state.form.length) {
            form.url = URL.DUTY_ADD;
            Fetch(URL.DUTY_ADD, {
                body: form
            })
                .then(res=> {
                    console.log(res);
                    alert('保存成功')
                })
                .catch(e=> {
                    console.log(e);
                })
        }
    },
    render(){
        const self = this;
        const {dispatch, user} = this.props;
        const teacher_class = this.props.user.class;

        return (
            <Panel>
                <Header>值日表</Header>
                <div className="form-horizontal">
                    {
                        self.state.form.map((item, index)=> {
                            if (user.class.length && index == 0)item.value = user['class'][0]['class'].name;
                            return <FormItem index={index} {...item} key={index}></FormItem>
                        })
                    }
                    <FormGroup>
                        <Label></Label>
                        <InputGroup>
                            <button onClick={self.onsubmit} className="btn btn-success"
                                    type="submit">
                                保存
                            </button>
                        </InputGroup>
                    </FormGroup>
                </div>
            </Panel>
        )
    }
});
function select(state) {
    return {
        [md5Url.DUTY_ADD]: state.fetchBySubject[md5Url.DUTY_ADD],
        [PAGE_SUBJECT.DUTY_ADD]: state.pageBySubject[PAGE_SUBJECT.DUTY_ADD],
        user: state.user.user
    }
}
export default connect(select)(Duty)